<template>
	<view class="experts flex-c">
		<template v-if="!list[0]">
			<!-- 默认插槽，用来展示空内容和刷新按钮 -->
			<slot></slot>
		</template>
		<template v-else>
			<view class="expert flex-c">
				<view class="expert-list-item" v-for="(expert, index) in list" :key="index" @tap="$CHS.goExpertHome(expert.expertId)">
					<view class="expert-des-head flex-r ac">
						<view class="author-image border-round">
							<lazy-image class="inheritwh border-round" :src="expert.expertAvatar+'?imageView2/1/w/100/h/100/q/50'" type="expert" fit="cover"></lazy-image>
							<view class="expert-note" v-if="expert.saleArticleNum" :class="{'round': expert.saleArticleNum < 10}">
								<text>{{expert.saleArticleNum}}</text>
							</view>
						</view>
						<view class="author-info flex-c">
							<view class="info-top flex-r ac">
								<text class="text-regular">{{expert.expertName}}</text>
								<image v-if="expert.cardFlag == 1" src="@/public/images/public/y@1x.png" mode="aspectFit"></image>
							</view>
							<view class="info-detail text-info color-grey text-hidden" v-if="expert.remark">{{expert.remark}}</view>
						</view>
						<view class="author-fav" v-if="type == 'follow'">
							<button class="favbtn active-msg" :class="{'nochat': expert.userIdentity != 1}" @tap.stop="$CHS.goChat(expert.expertId, expert.userIdentity)">私信</button>
						</view>
						<view class="author-fav" v-else>
							<button v-if="(expert.followStatus == 1 && noFollow.indexOf(expert.expertId) == -1) || isFollow.indexOf(expert.expertId) > -1"  class="favbtn active-msg" :class="{'nochat': expert.userIdentity != 1}" type="warn" size="mini" @tap.stop="$CHS.goChat(expert.expertId, expert.userIdentity)">私信</button>
							<button v-else class="favbtn active-fav" @tap.stop="favExpert(expert.expertId)">关注</button>
						</view>
					</view>
					<view class="expert-des-body flex-r ac jsb">
						<view class="left flex-c">
							<view class="author-info-tag flex-r ac">
								<text class="tag-blue text-hidden" v-if="expert.expertTag">{{expert.expertTag}}</text>
								<text class="tag-red" v-if="expert.hotContineTxt">{{expert.hotContineTxt}}</text>
								<text class="tag-gold" v-else-if="expert.hitResultTxt">{{expert.hitResultTxt}}</text>
							</view>
							<view class="author-result-detail text-info flex-r ac color-red" v-if="Number(expert.hitRate)>=60">
								<text>{{expert.hitRateName}}：</text>
								<text class="num">{{expert.hitRate}}%</text>
							</view>
						</view>
						<view class="right flex-c color-red" v-if="type == 'popularity'">
							<template v-if="expert.fansNum && expert.fansNum>0">
								<text class="info-num">{{expert.fansNum}}</text>
								<text class="info-des">近7天涨粉</text>
							</template>
						</view>
					</view>
					<view class="expert-des-foot text-mini flex-r ac jsb">
						<view class="flex-r">
							<text>近7天有</text>
							<text class="color-blue">{{expert.newArticleNum || 0}}</text>
							<text>条最新方案</text>
						</view>
						<image class="icon" src="@/public/images/public/yjt_h.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view class="list-end flex-r pb20 mt20" v-if="isEnd">
				<text>已经到底啦～</text>
			</view>
		</template>
	</view>
</template>

<script>
	/**
	 * NewExpertlist 新版专家列表
	 * @description 关注专家、连红推荐、周人气榜、全部专家等专家列表
	 * @property {Array} list 专家列表数据
	 * @property {Number,String} type = [follow|continuousRed|popularity|publicRed|all] 列表类型
	 *  @value follow 关注专家
	 *  @value continuousRed 连红推荐
	 *  @value popularity 周人气榜 
	 *  @value publicRed 公推连红榜
	 *  @value all 全部专家
	 * @property {Boolean} isEnd 是否已加载完
	 * @example <NewExpertlist type="101" :list="list"></NewExpertlist>
	 */
	export default {
		name:"NewExpertlist",
		props: {
			list: {
				type: Array,
				default: ()=>[]
			},
			type: { //展示类型
				type: String,
				default: 'all'
			},
			isEnd: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				isFaving: null //防止重复关注
			}
		},
		computed: {
			noFollow() {
				return this.$store.state.expertNoFollow
			},
			isFollow() {
				return this.$store.state.expertFollow
			},
		},
		methods: {
			/**
			 * @description 关注专家
			 * @param {string} eid 专家ID
			 */
			favExpert(eid) {
				if(!this.$store.state.isLogin){
					this.$CHS.goUserLogin()
					return
				}
				if(eid === this.isFaving){
					return
				}else{
					this.isFaving = eid
					this.$CHS.favExpert(eid).finally(()=>{
						this.isFaving = null
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.experts{
		background-color: #FFFFFF;
		width: 590rpx;
		min-height: calc(var(--safe-height) - #{$navbar-height});
		/deep/ .empty-content{
			flex: 2;
		}
		.expert{
			width: 100%;
		}
		.expert-list-item{
			margin: 0 20rpx;
			background-color: #FFFFFF;
			padding: 20rpx 0;
			position: relative;
			.expert-des-head{
				.author-image{
					width: 88rpx;
					height: 88rpx;
					background-color: #FFFFFF;
					background-size: 100%;
					position: relative;
					button{
						position: absolute;
						top: 78rpx;
						width: 88rpx;
						height: 40rpx;
						font-size: 20rpx;
						color: #FFFFFF;
						line-height: 40rpx;
						background: #0055FF;
						border-radius: 20rpx;
						margin: 0;
						padding: 0;
						box-sizing: border-box;
						&.fav{
							line-height: 36rpx;
							background: #FFFFFF;
							border: 2rpx solid #0055FF;
							color: #0055FF;
						}
						&.nochat{
							border-color: #99BBFF;
							color: #99BBFF;
						}
					}
				}
				.author-info{
					margin-left: 20rpx;
					flex: 2;
					.info-top{
						font-weight: 500;
						image{
							margin-left: 7rpx;
							width: 24rpx;
							height: 24rpx;
						}
					}
					.info-detail{
						width: 250rpx;
						margin-top: 20rpx;
					}
				}
				.author-fav{
					.favbtn{
						width: 120rpx;
						height: 56rpx;
						border-radius: 28rpx;
						font-size: 24rpx;
						color: #FFFFFF;
						box-sizing: border-box;
						padding: 0;
						margin: 0;
						&.active-fav{
							background: #0055FF;
							line-height: 56rpx;
							border: none;
						}
						&.active-msg{
							color: #0055FF;
							background: #FFFFFF;
							border: 2rpx solid #0055FF;
							line-height: 52rpx;
						}
						&.nochat{
							border-color: #99BBFF;
							color: #99BBFF;
						}
					}
				}
				.buy-card{
					.cardbtn{
						width: 180rpx;
						height: 56rpx;
						background: linear-gradient(90deg, #FFD18C 0%, #FFEBCE 100%);
						border-radius: 28rpx;
						margin: 0;
						padding: 0;
						font-size: 24rpx;
						color: #591500;
						line-height: 56rpx;
						box-sizing: border-box;
					}
				}
			}
			.expert-des-body{
				margin: 15rpx 0 0;
				&.card{
					margin-left: 108rpx;
				}
				.left{
					align-self: flex-start;
				}
				.right{
					align-items: flex-end;
					.info-num{
						font-size: 40rpx;
						font-family: Arial;
						font-weight: bold;
					}
					.info-des{
						margin-top: 15rpx;
						font-size: 20rpx;
					}
				}
				.author-info-tag{
					// text:first-child{
					// 	margin: 0;
					// }
					.tag-blue{
						max-width: 150rpx;
					}
				}
				.author-result-detail{
					margin-top: 15rpx;
					.num{
						font-weight: bold;
					}
				}
			}
			.expert-des-foot{
				&.card{
					margin-left: 108rpx;
				}
				margin-top: 20rpx;
				height: 48rpx;
				background: #F2F5FA;
				border-radius: 4rpx;
				padding: 0 20rpx;
				color: #5C7099;
				.icon{
					width: 25rpx;
					height: 26rpx;
				}
			}
		}
		.expert-list-item::after{
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 1px;
			background-color: #EDEDED;
			transform-origin: 0 0;
			transform: scaleY(0.5);
		}
		.expert-list-item:last-child::after{
			content: none;
		}
	}
</style>